<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>HelloWorld</title>
    <script type="text/javascript" src="../assets/js/vue.js"></script>
</head>
<body>
    <h1>HelloWorld</h1>
    <hr>
    <div id="app">
        <p>{{newPrice}}</p>
        <ul>
            <li v-for="item in reversNews">{{item.title}}--{{item.date}}</li>
        </ul>
    </div>
    <script type="text/javascript">
       var newsList = [
        {title:'我随便瞎写 随便乱写的',date:'2017/3/24'},
        {title:'我随便瞎写324234234 随便乱写的',date:'2017/3/25'},
        {title:'我随便瞎写555556 随便乱写的7777',date:'2017/3/25'},
        {title:'我随便瞎写999999 随便乱写的555577',date:'2017/3/26'},
       ]

       var app = new Vue({
        el:'#app',
        data:{
            price: 100,
            newsList:newsList
        },
        computed:{
            newPrice:function(){
                return this.price='$'+this.price+'元';
            },
            reversNews:function(){
                return this.newsList.reverse();
            }
        }
       })
    </script>
</body>
</html>